<Modal
  @title="Generate operation token"
  @onClose={{action 'onClose'}}
  @isActive={{isActive}}
  @type="warning"
  @showCloseButton={{true}}
>
  <section class="modal-card-body">
    {{#if encoded_token}}
      <p class="has-bottom-margin-l">
        Below is the process and the values necessary to generate your operation token. Read the instructions carefully!
      </p>
      <div class="has-bottom-margin-m">
        <div class="has-bottom-margin-xl">
          <h4 class="field-title">
            Encoded operation token
          </h4>
          <p class="help has-text-grey has-bottom-margin-xs">
            This is a one-time token that will be used to generate the operation token. Please save it.
          </p>
          <div class="message is-list has-copy-button" tabindex="-1">
            <HoverCopyButton @copyValue={{encoded_token}} />
            <code class="is-word-break" data-test-shamir-encoded-token>{{encoded_token}}</code>
          </div>
        </div>
        {{#if otp}}
          <div class="has-bottom-margin-xl">
            <h4 class="field-title">
              One time password (OTP)
            </h4>
            <p class="help has-text-grey has-bottom-margin-xs">
              This OTP will be used to decode the generated operation token. Please save it.
            </p>
            <div class="message is-list has-copy-button" tabindex="-1">
              <HoverCopyButton @copyValue={{otp}} />
              <code class="is-word-break">{{otp}}</code>
            </div>
          </div>
        {{/if}}
        <div class="has-bottom-margin-xl">
          <h4 class="field-title">
            DR operation token command
          </h4>
          <p class="help has-text-grey has-bottom-margin-xs">
            {{#if otp}}
            This command contains both the encoded token and the OTP. It should be executed on the primary cluster in order to generate the operation token.
            {{else}}
            This command requires the OTP saved earlier. It should be executed on the primary cluster in order to generate the operation token.
            {{/if}}
          </p>
          <div class="message is-list has-copy-button" tabindex="-1">
            {{#let (if otp
              (concat 'vault operator generate-root -dr-token -otp="' otp '" -decode="' encoded_token '"')
              (concat 'vault operator generate-root -dr-token -otp="<enter your otp here>" -decode="' encoded_token '"')
              ) as |cmd|}}
              <HoverCopyButton @copyValue={{cmd}} />
              <code class="is-word-break">{{cmd}}</code>
            {{/let}}
          </div>
        </div>
      </div>
      <div>
        <button type="button" class="button is-primary" {{action 'onCancelClose'}}>
          Clear &amp; Close
        </button>
      </div>
    {{else if (and generateAction (not started))}}
    <form {{action 'startGenerate' (hash pgp_key=pgp_key) on="submit"}} id="shamir">
      {{message-error errors=errors}}
      {{#if (eq generateStep 'chooseMethod')}}
        <div class="has-bottom-margin-m" data-test-shamir-modal-body>
          {{yield}}
        </div>
        <div class="field is-grouped">
          <div class="control is-flex-row">
            <button type="button" class="link" {{action (mut generateWithPGP) true}}>
              Provide PGP Key
            </button>
          </div>
          <div class="control">
            <span class="button auto-width is-white is-static">
              or
            </span>
          </div>
          <div class="control">
            <button type="submit" class="button is-primary" data-test-generate-token-cta>
              Generate operation token
            </button>
          </div>
        </div>
      {{/if}}
      {{#if (eq generateStep 'providePGPKey')}}
        <div class="has-bottom-margin-m">
          <p>
            Choose a PGP Key from your computer or paste the contents of one in the form below.
            This key will be used to Encrypt the generated operation token.
          </p>
          {{pgp-file index='' key=pgpKeyFile onChange=(action 'setKey')}}
        </div>
        <div class="field is-grouped">
          <div class="control">
            <button type="button" class="button" {{action "reset"}}>
              Back
            </button>
          </div>
          <div class="control">
            <button type="button" disabled={{not pgp_key}} class="button is-primary" {{action "savePGPKey"}}>
              Use PGP Key
            </button>
          </div>
        </div>
      {{/if}}
      {{#if (eq generateStep 'beginGenerationWithPGP')}}
        <div>
          <p class="has-bottom-margin-m">
            Below is the base-64 encoded PGP Key that will be used to encrypt the generated operation token.
            Next we'll enter portions of the master key to generate an operation token. Click the "Generate operation token" button to proceed.
          </p>
          <h4 class="field-title has-bottom-padding-m is-fullwidth">
            PGP Key {{pgpKeyFile.fileName}}
          </h4>
          <div class="message is-list has-copy-button" tabindex="-1">
            <HoverCopyButton @copyValue={{pgp_key}} />
            <code class="is-word-break">{{pgp_key}}</code>
          </div>
        </div>
        <div class="field is-grouped">
          <div class="control">
            <button type="button" class="button" {{action "reset"}}>
              Back
            </button>
          </div>
          <div class="control">
            <button type="submit" disabled={{and (not pgp_key)}} class="button is-primary">
              Generate operation token
            </button>
          </div>
        </div>
      {{/if}}
    </form>
    {{else}}
      <form {{action 'onSubmit' (hash key=key) on="submit"}} id="shamir">
        <div class="has-bottom-margin-m">
          {{#if errors}}
            <div class="box is-shadowless is-marginless no-padding-top is-fullwidth">
              {{message-error errors=errors}}
            </div>
          {{/if}}
          <div class="box is-shadowless is-marginless no-padding-top is-fullwidth no-padding-sides" data-test-form-text>
            {{#if otp}}
              <div class="has-bottom-margin-xxl">
                <h4 class="field-title">
                  One-time password (OTP)
                </h4>
                <p class="help has-text-grey has-bottom-margin-xs">
                  This OTP will be used to decode the generated operation token. <span class="has-text-semibold">Save this</span>, as you will need it later to decode the operation token.
                </p>
                <div class="message is-list has-copy-button" tabindex="-1">
                  <HoverCopyButton @copyValue={{otp}} />
                  <code class="is-word-break">{{otp}}</code>
                </div>
              </div>
            {{/if}}
            <p>
              Generate an operation token by entering a portion of the primary's master key. Once all portions are entered, the generated token may be used to manage your secondary Disaster Recovery cluster.
            </p>
          </div>
          <div class="field">
            <label for="key" class="is-label">
              Master Key Portion
            </label>
            <div class="control">
              {{input class="input"type="password" name="key" value=key data-test-shamir-input=true}}
            </div>
          </div>
        </div>
        <div class="has-bottom-margin-m">
          <div class="columns is-mobile">
            <div class="column is-narrow">
              <button
                type="submit"
                class="button is-primary"
                disabled={{loading}}
                data-test-shamir-submit=true
              >
                {{if generateAction "Generate Token" buttonText}}
              </button>
            </div>
            <div class="column is-flex-v-centered is-flex-end">
              {{#if (or started hasProgress)}}
                <ShamirProgress
                  @threshold={{threshold}}
                  @progress={{progress}}
                />
              {{/if}}
            </div>
          </div>
        </div>
      </form>
    {{/if}}
  </section>
  <footer class="modal-card-foot modal-card-foot-outlined">
    <button
      class="button is-secondary"
      onclick={{action 'onCancelClose'}}
      data-test-shamir-modal-cancel-button
    >
      {{if encoded_token 'Close' 'Cancel'}}
    </button>
  </footer>
</Modal>